<template>
	<view class="contener">
		<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" :labelWidth="74"
			:labelStyle="{marginBottom:'6rpx'}">
			<u-form-item label="打卡定位:" prop="position" borderBottom required>
				<u--input v-model="form.position" disabled disabledColor="#ffffff" placeholder="打卡定位"
					border="none"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item label="拜访照片:" prop="visitPhotos" borderBottom labelPosition="top" required>
				<FileUpload v-model="form.visitPhotos" :limit="3"></FileUpload>


			</u-form-item>
			<u-form-item label="拜访结果:" prop="visitResult" borderBottom labelPosition="top" required>
				<u--textarea v-model="form.visitResult" placeholder="请填写拜访结果"></u--textarea>
			</u-form-item>
			<u-form-item label="意向产品:" @click="selectIntendedProduct2" prop="intendedProduct2" borderBottom ref="item1"
				required>
				<text
					:style="{ color: form.intendedProduct2?'':'#C0C4CC'}">{{selectedIntendedProduct2 || '请选择意向产品'}}</text>
				<u-icon slot="right" name="arrow-right"></u-icon>

			</u-form-item>
			<u-form-item label="达成数量:" prop="quantityAchieved" borderBottom>
				<u--input v-model="form.quantityAchieved" placeholder="请填写达成数量" border="none"></u--input>
			</u-form-item>
			<u-form-item label="有无预约业务:" prop="hasAppointmentService" @click="selectHasAppointmentService" borderBottom
				:labelWidth="104">
				<!-- <u--input v-model="form.hasAppointmentService" disabled disabledColor="#ffffff" placeholder="请选择有无预约业务"
					border="none"></u--input> -->
				<text
					:style="{ color: form.hasAppointmentService?'':'#C0C4CC'}">{{form.hasAppointmentService || '请选择有无预约业务'}}</text>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
		</u--form>


		<u-form-item label="预约业务:" @click="jumpSource" v-if="form.hasAppointmentService=='有'" prop="appointmentService"
			borderBottom :labelWidth="104">
			<text :style="{ color: form.appointmentService2?'':'#C0C4CC'}">{{selectedyewuSource || '请选择预约业务'}}</text>
			<!-- <u--input v-model="selectedyewuSource" disabled disabledColor="#ffffff" placeholder="请选择预约业务"
				border="none"></u--input> -->
			<u-icon slot="right" name="arrow-right"></u-icon>
		</u-form-item>
		<u-form-item label="备注:" prop="remark" borderBottom labelPosition="top">
			<u--textarea v-model="form.remark" placeholder="请填写备注"></u--textarea>
		</u-form-item>

		<u-button v-if="!this.id" type="primary" @click="submit" text="保存" style="margin-top: 50rpx;width: 80%;"
			shape="circle"></u-button>
		</u--form>
	</view>
</template>

<script>
	import FileUpload from '../../../../components/file-upload.vue'
	import {
		addJzzxCheckInFill,
		getJzzxCheckInFill
	} from '@/common/api/JzzxCheckInFill.js'
	export default {
		components: {
			FileUpload
		},
		data() {
			return {
				id: null,
				form: {
					id: null,
					checkInId: null,
					customerId: null,
					position: null,
					visitPhotos: null,


					visitResult: null,
					intendedProduct: null,
					intendedProduct2: null,
					quantityAchieved: null,
					appointmentService: null,
					appointmentService2: null
				},
				// 业务；来源2
				yewuSourceList: [{
						key: 10,
						value: '个人储蓄存款'
					}, {
						key: 11,
						value: '对公存款'
					}, {
						key: 12,
						value: '其他存款'
					}, {
						key: 21,
						value: '农户贷款'
					},
					{
						key: 22,
						value: '农业生产经营贷款'
					},
					{
						key: 23,
						value: '小微企业与个体工商户贷款'
					}, {
						key: 31,
						value: '小微企业与个体工商户贷款'
					}, {
						key: 33,
						value: '收单'
					}, {
						key: 32,
						value: '电子支付'
					}, {
						key: 34,
						value: '对公结算'
					}, {
						key: 41,
						value: '财政类代理'
					}, {
						key: 42,
						value: '保险类代理'
					}, {
						key: 43,
						value: '其他代理'
					}, {
						key: 51,
						value: '银行卡增值服务'
					}, {
						key: 52,
						value: '理财服务'
					}, {
						key: 53,
						value: '信用服务'
					}, {
						key: 54,
						value: '贵金属'
					},
				],
				selectedyewuSource: '', //业务来源回显变量
				selectedIntendedProduct2: '',
				rules: {
					// 'visitPhotos': {
					// 	type: 'string',
					// 	required: true,
					// 	message: '请上传拜访照片',
					// 	trigger: ['blur', 'change']
					// },
					'visitResult': {
						type: 'string',
						required: true,
						message: '请填写拜访结果',
						trigger: ['blur', 'change']
					},
					'intendedProduct': {
						type: 'string',
						required: true,
						message: '请选择意向产品',
						trigger: ['blur', 'change']
					},
					'quantityAchieved': {
						type: 'number',
						message: '请输入数字！',
						trigger: 'blur'
					}

				}
			}
		},
		onLoad(option) {
			if (option.id) { //获取填报详情
				this.id = option.id
				this.getJzzxCheckInFill()
			} else {
				this.form.checkInId = option.checkInId
				this.form.position = option.address
				this.form.customerId = option.customerId
			}
		},
		methods: {
			jumpSource() {
				uni.navigateTo({
					url: `/pages/management/yewuSource?selectedId=${this.form.appointmentService2}`
				})

			},
			//根据id获取填报详情
			getJzzxCheckInFill() {
				getJzzxCheckInFill(this.id).then((res) => {
					this.form = res.data
				})
			},
			handleBackData(data) {
				this.selectedyewuSource = this.yewuSourceStatus(data)
				this.form.appointmentService2 = data

			},
			selectIntendedProduct2() { //选择产品意向 的回调
				uni.navigateTo({
					url: `/pages/management/yewuSource?method=handleIntendedProduct2&selectedId=${this.form.intendedProduct2}`
				})
			},
			handleIntendedProduct2(data) {
				debugger
				this.selectedIntendedProduct2 = this.yewuSourceStatus(data)
				this.form.intendedProduct2 = data

			},
			// 业务来源和产品意向回显
			yewuSourceStatus(data) {
				const listData = this.yewuSourceList;
				const option = listData.find(
					item => item.key == data
				);

				return option ? option.value : '未知状态';
			},
			//选择是否有无业务预约
			selectHasAppointmentService() {
				console.log("djdjj")
				uni.hideKeyboard();
				uni.showActionSheet({
					itemList: ['有', '无'],
					success: (res) => {
						console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
						if (res.tapIndex == 0) {
							this.$set(this.form, 'hasAppointmentService', '有');
						} else {
							this.$set(this.form, 'hasAppointmentService', '无');
						}
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},
			submit() {
				this.$refs.uForm.validate().then(res => {
					addJzzxCheckInFill(this.form).then((res) => {
						if (res.code == 200) { //提交成功

							this.$set(this.form, 'id', res.data);
							uni.showToast({
								title: '提交成功！',
								icon: 'none',
								duration: 2000
							});
						} else { //提交失败
							uni.showToast({
								title: '提交失败！',
								icon: 'none',
								duration: 2000
							});
						}

					})
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			}
		}
	}
</script>

<style scoped>
	.contener {
		padding: 40rpx 40rpx;

	}
</style>